﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script type="text/javascript" src="../../Scripts/3dParty/jsTree/_lib/jquery.js"> </script>
    <script type="text/javascript" src="../../Scripts/3dParty/jsTree/jquery.jstree.js"> </script>
    <script type="text/javascript" language="javascript">
        $(function () {
            //external action
            $("#renameDemo2").click(function () {
                $("#demo2").jstree("rename");
            });            
            
            //tree rules
            $("#demo2")
                .jstree(
                {
                    "rules": {
                        renameable: ["all"]
                    },
                    "callback": {
                        onrename: function (n, l, tree_ref, rollback) {
                            tree_ref.lock(true);
                            setTimeout(function () {
                                $.tree_rollback(rollback);
                                tree_ref.lock(false);
                            }, 1000);
                        }
                    },
                
                "json_data":
                    { "data":
                        [
                            { "data": "3A node",
                                "metadata": { id: 23 },
                                "children": ["3Child 1", "A Child 2"]
                            },
                            { "attr": { "id": "li.node.id1" },
                                "data": { "title": "Long format demo", "attr":
                                    { "href": "#" }
                                }
                            }
                        ]
                    },
                        "plugins": ["themes", "json_data", "ui", "crrm","dnd"]
                })
            .bind(
            "select_node.jstree", function (e, data) {
            });
        });
    </script>
</head>
<body>
    <div>
        Create &lt;div&gt; id="demo2"&lt;/div&gt;<br />
       

    </div>
    <input type="button" value="renameDemo2" id="renameDemo2"/>
    <div id="demo2" class="demo jstree jstree-0 jstree-default jstree-focused"/>
</body>
</html>
